<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ToDoList</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<header>
	<section>
		<form>
			<!--<label> 标签为 input 元素定义标注（标记）。
				label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
				<label> 标签的 for 属性应当与相关元素的 id 属性相同。
			-->
			<label for="title">
				ToDoList
			</label>
			<input type="text" id="title" name="title" placeholder="添加ToDo">
		</form>

	</section>

</header>
<!--具体内容
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
-->
<section>
	<h2>正在进行
		<!--记数-->
		<span id="todocount"></span>
	</h2>
	<!--有需 尚未完成 数据列表-->
	<ol id="todolist" class="demo-box"></ol>
	<h2>已经完成
		<span id="donecount"></span>
	</h2>
	<!--无需 已完成 数据列表--->
	<ul id="donelist"></ul>

</section>
<!--尾部信息-->
<footer>
	路飞学城todolist.cn <a href="javascript:;">clear</a>
</footer>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/index.js" type="text/javascript"></script>

</body>
</html>